<template>
    <div v-if="item.children"
         class="custom-sub-menu">
        <template v-if="item.children.length == 0">
            <el-menu-item :index="setActiveKey(item)"
                          @click="onClickMenuItem(item)">
                <i :class="setDefaultIcon(item.icon)"></i>
                <span class="menu-label text-over"
                      slot="title">
                    <esipsis-tip :content="item.label"
                                 placement="left" />
                </span>
            </el-menu-item>
        </template>
        <el-submenu v-else
                    :index="setActiveKey(item)">
            <template slot="title">
                <i :class="setDefaultIcon(item.icon)"></i>
                <span class="menu-label text-over"
                      slot="title">
                    <esipsis-tip :content="item.label"
                                 placement="left" />
                </span>
            </template>
            <template v-for="child in item.children">
                <custom-sub-menu v-if="child.children && child.children.length > 0"
                                 :item="child"
                                 :key="child.id"
                                 :rowKey="rowKey" />
                <el-menu-item v-else
                              :key="child.id"
                              :index="setActiveKey(child)"
                              @click="onClickMenuItem(child)">
                    <i :class="setDefaultIcon(child.icon)"></i>
                    <span class="menu-label text-over"
                          slot="title">
                        <esipsis-tip :content="child.label"
                                     placement="left" />
                    </span>
                </el-menu-item>
            </template>
        </el-submenu>
    </div>
</template>
<script>
import {
    current_menu_info,
    top_menu_active,
    static_route_path,
} from "@/config/storage-keys";
export default {
    name: "CustomSubMenu",
    props: {
        item: {
            type: Object,
            required: true,
            default: function () {
                return {};
            },
        },
        rowKey: {
            type: String,
            default: "id",
        },
    },
    methods: {
        onClickMenuItem(item) {
            this.$Storage.setSessionStorage(current_menu_info, item);
            const path = item.path;
            const i = static_route_path.findIndex((v) => v === path);
            if (i > -1) {
                this.$router.push({
                    path: static_route_path[i] + item.iframeSrc + "?" + item.id,
                });
            } else {
                this.$router.push({
                    path: path,
                });
                this.$Storage.setLocalStorage(top_menu_active, -1);
            }
        },
        setActiveKey(item) {
            const i = static_route_path.findIndex((v) => v === item.path);
            if (i > -1) {
                return item[this.rowKey] + "--" + item.id;
            } else {
                return item[this.rowKey] || item.id;
            }
        },
        setDefaultIcon(icon) {
            return icon ? icon : "iconfont cboardyuandian";
        },
    },
};
</script>